<template>
  <el-main style="background-color:#fff">
    <el-table
      :data="table.data"
      style="width: 100%"
    >
      <el-table-column
        prop="index"
        label="序号"
        width="100"
      >
        <template #default="scope">
          {{ (scope.$index + 1) + ((table.query.page - 1) * table.query.limit) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="site"
        label="视频网站"
        width="200"
      >
        <template #default="scope">
          {{ getSiteName(scope.row.site ) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="videoName"
        label="视频名称"
        min-width="200"
      />
      <el-table-column
        prop="videoUrl"
        label="视频地址"
        min-width="200"
      />
      <el-table-column
        prop="proxyServer"
        label="动态代理"
        width="200"
      />
      <el-table-column
        prop="device"
        label="访问设备"
        width="200"
      />
      <el-table-column
        prop="osName"
        label="访问系统"
        width="200"
      />
      <el-table-column
        prop="osVersion"
        label="访问系统版本"
        width="200"
      />
      <el-table-column
        prop="browserName"
        label="访问浏览器"
        width="200"
      />
      <el-table-column
        prop="browserVersion"
        label="浏览器版本"
        width="200"
      />
      <!--      <el-table-column-->
      <!--        fixed="right"-->
      <!--        label="操作"-->
      <!--        width="150"-->
      <!--      >-->
      <!--        <template-->
      <!--          #default="scope"-->
      <!--        >-->
      <!--          <el-button-->
      <!--            link-->
      <!--            type="primary"-->
      <!--            @click="onClickFlow(scope.row)"-->
      <!--          >-->
      <!--            流量统计-->
      <!--          </el-button>-->
      <!--                <el-button-->
      <!--                  link-->
      <!--                  type="primary"-->
      <!--                  @click="onClickDelete(scope.row)"-->
      <!--                >-->
      <!--                  删除-->
      <!--                </el-button>-->
      <!--                <el-button-->
      <!--                  link-->
      <!--                  type="primary"-->
      <!--                  @click="onClickModify(scope.row)"-->
      <!--                >-->
      <!--                  修改-->
      <!--                </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <br>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="table.total"
      :default-page-size="table.query.limit"
    />
  </el-main>

  <el-dialog
    v-model="form.visible"
    :title="form.name"
    :close-on-click-modal="false"
    destroy-on-close
    close-on-press-escape
    width="400"
    center
  >
    <el-form
      ref="ruleFormRef"
      label-position="left"
      :model="form"
      label-width="120px"
    >
      <el-form-item
        label="视频网站"
      >
        <el-input
          v-model="form.websiteName"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="名称"
      >
        <el-input
          v-model="form.name"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="地址"
      >
        <el-input
          v-model="form.url"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="视频时长"
      >
        <el-input
          v-model="form.time"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="视频大小"
      >
        <el-input
          v-model="form.length"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="视频采集地址"
      >
        <el-input
          v-model="form.videoAddr"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="采集时间"
      >
        <el-input
          v-model="form.videoTime"
          style="width: 190px;"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="onSubmit"
        >确定</el-button>
        <el-button @click="form.visible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'

import router from '@/router/index.js'
import { listVideo, visitHistory } from '@/apis/netflow.js'
import { ElMessage } from 'element-plus'
import service from '@/utils/request.js'

const ruleFormRef = ref(null) // 登录表单ref

const form = reactive({
  visible: false,
  websiteName: '',
  id: 0,
  name: '',
  url: '',
  time: '',
  length: '',
  videoAddr: '',
  videoTime: ''
})
const table = ref({
  total: 0,
  query: {
    websiteName: 'haokan',
    limit: 20,
    page: 1,
    order: null,
    email: null
  },
  data: [
    {
      id: 1,
      name: '百度',
      url: 'https:/www.baidu.com'
    },
    {
      id: 2,
      name: '百度1',
      url: 'https:/www.baidu.com'
    },
    {
      id: 3,
      name: '百度2',
      url: 'https:/www.baidu.com'
    }
  ]
})

const getListVideo = () => {
  const params = { limit: table.value.query.limit, page: table.value.query.page }
  visitHistory(params).then((result) => {
    console.log('visitHistory', result)
    table.value.data = result.list
    table.value.total = result.total
  })
}

getListVideo()

const onClickDelete = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
}
const onClickModify = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
  form.visible = true
  form.websiteName = table.value.query.websiteName
  form.id = item.id
  form.name = item.name
  form.url = item.url
  form.time = item.time
  form.length = item.length
  form.videoAddr = item.videoAddr
  form.videoTime = item.videoTime
}
const onClickDetail = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
}
const onClickDistribution = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
  router.push({
    name: 'managerDistribution',
    query: {
      name: item.name,
      url: item.url
    }
  })
}
const onClickOrg = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
  window.open(item.url, '_blank')
}

const onClickFlow = (row) => {
  console.log('row', row)
  router.push({
    name: 'flowDetail',
    query: {
      ...row
    }
  })
}

const onSubmit = () => {
  ruleFormRef.value.validate((validate) => {
    if (validate) { // 判断表单是否验证通过。
      const data = {
        ip: form.ip,
        device: form.device,
        os: form.os,
        browser: form.browser,
        version: form.browserVersion
      }
      const response = service({
        url: '/networkflow/video/_param',
        method: 'post',
        params: data
      })
      response.then((result) => {
        if (result.data === 0) {
          form.visible = false
          ElMessage.success('修改成功！')
          getListVideo()
        } else {
          form.visible = false
          ElMessage.error('修改失败！')
        }
      })
    } else {
      ElMessage.error('请检查数据！')
    }
  })
}
const getSiteName = (site) => {
  switch (site) {
    case 'haokan':
      return '好看'
    case 'fun':
      return '风行'
    case 'douyin':
      return '抖音'
    case 'kuaishou':
      return '快手'
  }
}

</script>

<style lang="scss">
a {
  color: blue;
  cursor: pointer;
  //text-decoration: none; /* 移除默认的下划线效果 */
  &:hover, &:active {
    text-decoration: underline;
    color: red; // 可选：在悬浮时改变文本颜色
  }
}

</style>
